<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/logo.png" alt="" />
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		
		<div class="list">
			<div class="item" v-for="item in list" :key="item.id" @click="goPage(item.id)">
				<img class="logo-img" :src="item.logo" alt="" />
				<div class="title">{{$i18n.locale == 'zh' ? item.cn_title: item.eu_title}}</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		getHelpTipsList,
	} from '@/api/user';
	export default {
		name: 'Tips',
		data: function() {
			return {
				list: ''
			}
		},
		created() {
			this.getList()
		},
		mounted() {},
		
		methods: {
			getList() {
				getHelpTipsList().then((res) => {
					const {
						list
					} = res.data
					this.list = list
				}).catch((err) => {
					console.log(err)
				})
			},
			goPage(id) {
				this.$router.push({
					path: 'tipsDetails',
					query: {
						id
					}
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #F5F5FA;
	}

	.list {
		margin: 30px 30px 0;
		.item {
			background-color: #fff;
			margin-bottom: 30px;
			padding-bottom: 34px;
			border-radius: 16px;
			overflow: hidden;
			.logo-img {
				width: 100%;
				height: 338px;
				object-fit: cover;
			}
			.title {
				margin-top: 34px;
				padding: 0 15px;
				word-wrap:break-word;
				box-sizing: border-box;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 32px;
				color: #060143;
			}
		}
	}
</style>